// 响应式设计样式文件

// 基础响应式容器
.container {
  width: 100%;
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 $container-padding;
  
  @include respond-to('tablet') {
    padding: 0 $container-padding-tablet;
  }
  
  @include respond-to('mobile') {
    padding: 0 $container-padding-mobile;
  }
}

// 响应式网格系统
.row {
  @include flex(row, flex-start, stretch, wrap);
  margin: 0 -#{$spacing-sm};
  
  @include respond-to('mobile') {
    margin: 0 -#{$spacing-xs};
  }
}

.col {
  flex: 1;
  padding: 0 $spacing-sm;
  
  @include respond-to('mobile') {
    padding: 0 $spacing-xs;
  }
}

// 响应式列宽
@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 percentage($i / 12);
    max-width: percentage($i / 12);
    padding: 0 $spacing-sm;
    
    @include respond-to('mobile') {
      padding: 0 $spacing-xs;
    }
  }
  
  .col-md-#{$i} {
    @include respond-to('tablet') {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }
  
  .col-sm-#{$i} {
    @include respond-to('mobile') {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }
}

// 移动端全宽列
@include respond-to('mobile') {
  .col-sm-12,
  .col-mobile-full {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

// 响应式显示/隐藏
.d-mobile-none {
  @include respond-to('mobile') {
    display: none !important;
  }
}

.d-mobile-block {
  @include respond-to('mobile') {
    display: block !important;
  }
}

.d-mobile-flex {
  @include respond-to('mobile') {
    display: flex !important;
  }
}

.d-tablet-none {
  @include respond-to('tablet') {
    display: none !important;
  }
}

.d-tablet-block {
  @include respond-to('tablet') {
    display: block !important;
  }
}

.d-tablet-flex {
  @include respond-to('tablet') {
    display: flex !important;
  }
}

.d-desktop-none {
  @include respond-to('desktop') {
    display: none !important;
  }
}

.d-desktop-block {
  @include respond-to('desktop') {
    display: block !important;
  }
}

.d-desktop-flex {
  @include respond-to('desktop') {
    display: flex !important;
  }
}

// 响应式文字大小
.text-responsive {
  font-size: $font-size-large;
  
  @include respond-to('tablet') {
    font-size: $font-size-medium;
  }
  
  @include respond-to('mobile') {
    font-size: $font-size-base;
  }
}

.heading-responsive {
  font-size: 3rem;
  
  @include respond-to('tablet') {
    font-size: 2.5rem;
  }
  
  @include respond-to('mobile') {
    font-size: 2rem;
  }
}

.subheading-responsive {
  font-size: 1.5rem;
  
  @include respond-to('tablet') {
    font-size: 1.25rem;
  }
  
  @include respond-to('mobile') {
    font-size: 1.125rem;
  }
}

// 响应式间距
.section-padding {
  padding: $section-padding;
  
  @include respond-to('mobile') {
    padding: $section-padding-mobile;
  }
}

.responsive-margin {
  margin: $spacing-xl 0;
  
  @include respond-to('tablet') {
    margin: $spacing-lg 0;
  }
  
  @include respond-to('mobile') {
    margin: $spacing-md 0;
  }
}

.responsive-padding {
  padding: $spacing-xl;
  
  @include respond-to('tablet') {
    padding: $spacing-lg;
  }
  
  @include respond-to('mobile') {
    padding: $spacing-md;
  }
}

// 响应式卡片
.card-responsive {
  @include card();
  
  @include respond-to('mobile') {
    padding: $spacing-md;
    border-radius: $border-radius-base;
  }
}

// 响应式按钮
.btn-responsive {
  padding: $button-padding-vertical $button-padding-horizontal;
  font-size: $button-font-size;
  
  @include respond-to('mobile') {
    padding: ($button-padding-vertical - 2px) ($button-padding-horizontal - 4px);
    font-size: $font-size-small;
  }
}

// 响应式表单
.form-responsive {
  .el-form-item {
    margin-bottom: $form-item-margin-bottom;
    
    @include respond-to('mobile') {
      margin-bottom: $form-item-margin-bottom - 6px;
    }
  }
  
  .el-input {
    .el-input__inner {
      height: $input-height;
      
      @include respond-to('mobile') {
        height: $input-height - 4px;
        font-size: $font-size-small;
      }
    }
  }
}

// 响应式导航
.nav-responsive {
  @include flex(row, space-between, center);
  
  @include respond-to('mobile') {
    flex-direction: column;
    align-items: stretch;
  }
  
  .nav-item {
    padding: $spacing-sm $spacing-md;
    
    @include respond-to('mobile') {
      padding: $spacing-xs $spacing-sm;
      text-align: center;
      border-bottom: 1px solid $border-color-light;
      
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

// 响应式头部
.header-responsive {
  height: $header-height;
  
  @include respond-to('mobile') {
    height: $header-height-mobile;
  }
  
  .logo {
    height: 40px;
    
    @include respond-to('mobile') {
      height: 32px;
    }
  }
  
  .nav-menu {
    @include respond-to('mobile') {
      display: none;
    }
  }
  
  .mobile-menu-btn {
    display: none;
    
    @include respond-to('mobile') {
      display: block;
    }
  }
}

// 响应式英雄区域
.hero-responsive {
  height: $hero-section-height;
  @include flex(column, center, center);
  
  @include respond-to('mobile') {
    height: $hero-section-height-mobile;
  }
  
  .hero-title {
    font-size: 3.5rem;
    margin-bottom: $spacing-lg;
    
    @include respond-to('tablet') {
      font-size: 2.8rem;
    }
    
    @include respond-to('mobile') {
      font-size: 2.2rem;
      margin-bottom: $spacing-md;
    }
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: $spacing-xl;
    
    @include respond-to('mobile') {
      font-size: 1rem;
      margin-bottom: $spacing-lg;
    }
  }
}

// 响应式产品网格
.product-grid-responsive {
  @include grid(repeat(auto-fit, minmax(300px, 1fr)), auto, $spacing-lg);
  
  @include respond-to('tablet') {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: $spacing-md;
  }
  
  @include respond-to('mobile') {
    grid-template-columns: 1fr;
    gap: $spacing-sm;
  }
}

// 响应式特性网格
.feature-grid-responsive {
  @include grid(repeat(auto-fit, minmax(280px, 1fr)), auto, $spacing-xl);
  
  @include respond-to('tablet') {
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-lg;
  }
  
  @include respond-to('mobile') {
    grid-template-columns: 1fr;
    gap: $spacing-md;
  }
}

// 响应式团队网格
.team-grid-responsive {
  @include grid(repeat(auto-fit, minmax(200px, 1fr)), auto, $spacing-lg);
  
  @include respond-to('tablet') {
    grid-template-columns: repeat(3, 1fr);
  }
  
  @include respond-to('mobile') {
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-md;
  }
}

// 响应式统计数据
.stats-responsive {
  @include flex(row, space-around, center);
  
  @include respond-to('mobile') {
    flex-direction: column;
    gap: $spacing-lg;
  }
  
  .stat-item {
    text-align: center;
    
    .stat-number {
      font-size: $stats-number-font-size;
      
      @include respond-to('mobile') {
        font-size: $stats-number-font-size * 0.8;
      }
    }
  }
}

// 响应式价格卡片
.pricing-responsive {
  @include flex(row, center, stretch, wrap);
  gap: $spacing-lg;
  
  @include respond-to('mobile') {
    flex-direction: column;
    gap: $spacing-md;
  }
  
  .pricing-card {
    flex: 1;
    min-width: $pricing-card-width;
    
    @include respond-to('mobile') {
      min-width: auto;
      width: 100%;
    }
  }
}

// 响应式时间轴
.timeline-responsive {
  .timeline-item {
    @include flex(row, flex-start, flex-start);
    
    @include respond-to('mobile') {
      flex-direction: column;
    }
    
    .timeline-content {
      flex: 1;
      margin-left: $spacing-lg;
      
      @include respond-to('mobile') {
        margin-left: 0;
        margin-top: $spacing-sm;
      }
    }
  }
}

// 响应式表格
.table-responsive {
  overflow-x: auto;
  
  @include respond-to('mobile') {
    .el-table {
      font-size: $font-size-small;
      
      .el-table__cell {
        padding: 8px 4px;
      }
    }
  }
}

// 响应式模态框
.modal-responsive {
  .el-dialog {
    width: 90%;
    max-width: 600px;
    
    @include respond-to('mobile') {
      width: 95%;
      margin: 5vh auto;
    }
  }
}

// 响应式图片
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

// 响应式视频
.video-responsive {
  position: relative;
  padding-bottom: 56.25%; // 16:9
  height: 0;
  overflow: hidden;
  
  iframe,
  object,
  embed,
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// 响应式搜索框
.search-responsive {
  @include flex(row, stretch, center);
  
  @include respond-to('mobile') {
    flex-direction: column;
    gap: $spacing-sm;
  }
  
  .search-input {
    flex: 1;
    
    @include respond-to('mobile') {
      width: 100%;
    }
  }
  
  .search-button {
    width: $search-button-width;
    
    @include respond-to('mobile') {
      width: 100%;
    }
  }
}

// 响应式面包屑
.breadcrumb-responsive {
  @include respond-to('mobile') {
    font-size: $font-size-extra-small;
    
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        @include text-ellipsis();
        max-width: 80px;
      }
    }
  }
}

// 响应式分页
.pagination-responsive {
  @include respond-to('mobile') {
    .el-pagination {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
      
      .el-pager {
        .number {
          min-width: 28px;
          height: 28px;
          line-height: 28px;
          font-size: $font-size-small;
        }
      }
    }
  }
}

// 响应式标签页
.tabs-responsive {
  @include respond-to('mobile') {
    .el-tabs__nav-scroll {
      overflow-x: auto;
    }
    
    .el-tabs__item {
      padding: 0 12px;
      font-size: $font-size-small;
    }
  }
}

// 响应式步骤条
.steps-responsive {
  @include respond-to('mobile') {
    .el-steps {
      .el-step__title {
        font-size: $font-size-small;
        line-height: 1.2;
      }
      
      .el-step__description {
        font-size: $font-size-extra-small;
      }
    }
  }
}

// 响应式抽屉
.drawer-responsive {
  @include respond-to('mobile') {
    .el-drawer {
      width: 100% !important;
    }
  }
}